<template>
  <div class="w-100 h-100">
    <div style="width: 100; height: 10%" class="d-flex justify-content-end">
      <FakeLegend
        style="margin: auto 30px auto 0px"
        :color="colorSingleList"
        :text="['收集总量', '雨水净化量']"
      >
      </FakeLegend>
    </div>
    <div class="bottom">
      <div id="ysjhl" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { useFunc } from "@/hook/useFunc";
import { useOptions } from "@/hook/useOptions";

const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];
let option = {
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "shadow" },
  },
  grid: {
    left: "10%", // 根据实际情况调整，增加这个值
    right: "10%",
    bottom: "10%",
    top: "0%",
    containLabel: true,
  },
  yAxis: {
    type: "category",
    name: "百分比", // 在这里设置你的单位
    nameLocation: "end", // 将单位放在轴的末端（最上方）
    nameTextStyle: {
      // 单位样式设置
      color: "#fff",
      fontSize: 20,
      padding: [0, 0, 10, -10], // 调整单位位置，数组格式为[top, right, bottom, left]
    },
    data: ["再生水厂", "中水厂", "雨水调蓄池"],
    axisTick: false,
    axisLine: {
      show: true,
      lineStyle: {
        type: "dashed",
      },
    },
    axisLabel: {
      interval: 0,
      fontSize: 20,
      fontFamily: "OPPOSans-Regular",
      color: "#667A8E",
    },
  },
  xAxis: {
    name:'㎡',
    min: 0,
    max: 100,
    type: "value",
    axisLine: { show: false },
    splitLine: {
      lineStyle: {
        color: "rgba(92,225,255,0.5)", // 设置分割线颜色为蓝色
      },
    },
    axisLabel: {
      interval: 0,
      formatter: "{value}",
      fontSize: 20,
      color: "#667A8E",
    },
  },
  series: [
    {
      name: "收集总量",
      type: "bar",
      barWidth: 10,
      data: [],
      // z: 2,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1, // 横向渐变
          y2: 0,
          colorStops: [
            { offset: 1, color: "rgba(3, 230, 254)" },
            { offset: 0, color: "rgba(3, 230, 254,0)" },
          ],
        },
      },
      showBackground: true,
      backgroundStyle: {
        color: "rgba(82, 191, 242, .0)",
        borderColor: "rgba(82, 191, 242, .2)",
        borderWidth: 2,
      },
    },

    {
      name: "雨水净化量",
      type: "bar",
      barWidth: 10,
      // barGap: '200%',
      data: [],
      z: 1,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          type: "linear",
          global: false,
          colorStops: [
            {
              offset: 1,
              color: "rgba(184, 235, 143)",
            },
            {
              offset: 0,
              color: "rgba(184, 235, 143,0)",
            },
          ],
        },
      },
      showBackground: true,
      backgroundStyle: {
        color: "rgba(82, 191, 242, .0)",
        borderColor: "rgba(82, 191, 242, .2)",
        borderWidth: 2,
      },
    },

    // 省略其他 series 配置，但对于每个 series，确保调整 x2 和 y2 为横向渐变
  ],
};
const props = defineProps({
  selectValue: {
    type: Number,
    default: 2024,
  },
});

let myChart: any;
const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [[], []];
  try {
    data = jsonData.value.yxjk.ysjhl[props.selectValue];
  } catch (error) {}

  return data;
});
watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        xAxis: {
          max: Math.max(...val[0], ...val[1]),
        },
        series: [{ data: val[0] }, { data: val[1] }],
      });
    }
  }
);

onMounted(() => {
  myChart = echarts.init(document.getElementById("ysjhl") as HTMLElement);
  useFunc().setDefaultOption(myChart);
  myChart.setOption(option);
});
</script>

<style lang="less" scoped>
.bottom {
  width: 100%;
  height: 84%;
  display: flex;
}
</style>
